<template>
  <div>
    <!-- position -->
    <div class="position">
      <Breadcrumb>
          <BreadcrumbItem to="/"><Icon type="ios-home-outline"/>首页</BreadcrumbItem>
          <BreadcrumbItem to="/apointment">我的预约</BreadcrumbItem>
          <BreadcrumbItem>预约列表</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <!-- tabs -->
   
    <div class="hd pd20">
       <div  class="title-1">
         <div class="inner">预约列表</div>
        </div>

      <div class="tab-content" v-if="tab === 'tab1'">
        <ul class="days">
          <li v-for="(day, i) in days" :key="i" :class="{active: i === index}" @click="dayClickHandle(i)">
            <div class="days-date">{{day.date}}</div>
            <div class="days-subtitle">{{day.subtitle}}</div>
            <div class="days-arrow" v-if="i === index"></div>
          </li>
        </ul>

        <div class="tabcard-wrap mt20 t5">
          注：实际以医院的排队叫号为准，如已预约则根据预约时段插入队列
        </div>
        

      </div>
      <div class="tab-content mt20">
         <Card class="mt10" v-for="i in 4" >
            <Row slot="title" >
              <Col span="18" >
                <span class="t3">就诊人：</span>
                张三 &nbsp;&nbsp;&nbsp;
                男 &nbsp;&nbsp;&nbsp;
                42岁 &nbsp;&nbsp;&nbsp;
                <span class="t3">身份证号：</span>
                74455115555584214351  &nbsp;&nbsp;&nbsp;
                <span class="t3">手机号：</span> 
                13565854874
               </Col>
              <Col span="6" class="text-right">
                就诊序号： 
                <span class="t5">20</span> &nbsp;&nbsp;&nbsp;
                当前叫号:
                <span class="t5">2</span>
              </Col>
            </Row>
            <Row class="row-image" :gutter="10">
              <Col span="12">
                  <div><span class="t3">就诊科室：</span>胸内科</div>
                  <div class="mt10"><span class="t3">就诊医生：</span>张三</div>
                  <div class="mt10"><span class="t3">就诊时段：</span>2018-10-20 10:30</div>
              </Col>
              <Col span="12" class="text-right">
                <Button type="primary">取消预约</Button>
              </Col>
            </Row>
          </Card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: 'tab1',
      index: 0,
      days: [
        {
          date: '11月01日',
          subtitle: '今天'
        },
        {
          date: '11月02日',
          subtitle: '周五'
        },
        {
          date: '11月03日',
          subtitle: '周六'
        },
        {
          date: '11月04日',
          subtitle: '周日'
        },
        {
          date: '11月05日',
          subtitle: '周一'
        },
        {
          date: '11月06日',
          subtitle: '周二'
        },
        {
          date: '11月07日',
          subtitle: '周三'
        },
        
      ]
    }
  },
  methods: {
    dayClickHandle (i) {
      this.index = i
    },
    show (index) {
      this.$Modal.info({
        title: '提示',
        content: index
      })
    }
  }
}
</script>

<style scoped lang="less">
@border-color: #51B6FA;

.days {
  display: flex;
  justify-content: center;
  background: #F3F7F8;
  text-align: center;
  > li{
    font-size: 14px;
    margin-right: 40px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    color: #666;
    &.active {
      color: #fff;
      background: @border-color;
    }
    .days-arrow {
      position: absolute;
      bottom: -8px;
      left: 30px;
      width: 16px;
      height: 16px;
      background: @border-color;
      border-left:1px solid @border-color;
      border-top:1px solid @border-color;
      transform: rotate(-135deg)
    }
  }
}
.tabcard-wrap {
  text-align: center;
}
</style>
